<template>
    <p>{{msg}}</p>
    <button @click="fn">执行fn</button>
    <comp-a></comp-a>
    <comp-b></comp-b>
    <comp-c></comp-c>
    <app2></app2>
</template>

<script>

//在我们使用组件开发的时候, 有一些情况下会存在相同的代码逻辑, 我们要对相同代码逻辑进行抽取
import mixin from "./mixins/mixin1"
//mixin的合并规则
//当mixin对象中的选项和组件对象中的选项发生了冲突,那么会遵循一下几个规则
//1 data函数的返回值对象
//  返回值对象默认情况下会进行合并
//  如果data返回值对象的属性发生了冲突, 那么会保留组件自身的数据;
//2 生命周期钩子函数 ==>事件池
//  生命周期钩子函数会被合并数组, 两个都会执行,先执行mixin中的钩子函数
//3 directives,components,methods 将会被合并为同一个对象
//  和data一样


import compA from "./components/A"
import compB from "./components/B"
import compC from "./components/C"
import App2 from "./App2"
export default {
    name: 'App',
    mixins: [mixin],
    directives:{},
    components:{
        compA,
        compB,
        compC,
        App2
    },
    created() {
        console.log("我是组件中的-->created")
    },
    data(){
        return{
            title: "我是APP.vue中的title"
        }
    },
    methods:{
        fn:function(){
            this.msg = "10000"
        }
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
